<section id="widget-grid">
	<div class="row">
    	<div id="list-alert">
        </div>
    </div>
    <div class="row">
		<article class="col-sm-24 col-md-24 col-lg-12" style="padding-left:13px;padding-right:5px">
			<div class="jarviswidget" id="wid-id-0"
				data-widget-colorbutton="false" data-widget-editbutton="false"
				data-widget-togglebutton="false" data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false" data-widget-custombutton="false"
				data-widget-sortable="false" style="height: 300px;">
				<header>
					<span class="widget-icon"> <i class="glyphicon glyphicon-stats txt-color-darken"></i></span>
					<h2>每台物理机剩余CPU资源</h2>
				</header>
				<!-- widget div-->
				<!-- widget edit box -->
				<div class="jarviswidget-editbox"></div>
				<!-- end widget edit box -->
				<!-- content -->
				<div id="unitCpuChart" class="chart txt-color-blue" style="height: 300px;"></div>
				<!-- end widget div -->
			</div>
		</article>
	</div>
	<div class="row">
		<article class="col-sm-24 col-md-24 col-lg-12" style="padding-left:13px;padding-right:5px">
			<div class="jarviswidget" id="wid-id-0"
				data-widget-colorbutton="false" data-widget-editbutton="false"
				data-widget-togglebutton="false" data-widget-deletebutton="false"
				data-widget-fullscreenbutton="false" data-widget-custombutton="false"
				data-widget-sortable="false" style="height: 300px;">
				<header>
					<span class="widget-icon"> <i class="glyphicon glyphicon-stats txt-color-darken"></i></span>
					<h2>每台物理机剩余内存资源</h2>
				</header>
				<!-- widget div-->
				<!-- widget edit box -->
				<div class="jarviswidget-editbox"></div>
				<!-- end widget edit box -->
				<!-- content -->
				<div id="unitMemChart" class="chart txt-color-blue" style="height: 300px;"></div>
				<!-- end widget div -->
			</div>
		</article>
	</div>
</section>
<script>
    pageSetUp();
    
    var unitCpuChart = echarts.init(document.getElementById('unitCpuChart'));
    var unitMemChart = echarts.init(document.getElementById('unitMemChart'));
    unitCpuChart.showLoading();
    unitMemChart.showLoading();
    
    sendGetWithoutLayer("/upm_manager/v1.0/monitor/site/cluster/"+getSession("clusterId")+"/hostinfos",initChart,ListAlert,null);
    
    function initChart(data){
    	var legendData = [],
    		xAxisData = [];
    	var seriesCpu = [],
    		seriesMem = [];
    	var option = {
    		    tooltip : {
    		        trigger: 'axis',
    		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
    		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    		        }
    		    },
    		    legend: {
    		    	type: 'scroll',
    		        data:[]
    		    },
    		    grid: {
    		        left: '3%',
    		        right: '4%',
    		        bottom: '3%',
    		        containLabel: true
    		    },
    		    xAxis : [
    		        {
    		            type : 'category',
    		            data : []
    		        }
    		    ],
    		    yAxis : [
    		        {
    		            type : 'value'
    		        }
    		    ],
    		    series : []
    		};
    	
    	$.each(data.data, function(unitIndex, unit){
    		var cpuData = [],
				memData = [];
    		
    		$.each(unit.containers, function(containerIndex, container){
    			legendData.push(container.container_name);
    			
    			cpuData = [],
				memData = [];
    			for(i=0; i<xAxisData.length; i++){
        			cpuData.push(0);
        			memData.push(0);
        		}
    			cpuData.push(container.cpu);
    			memData.push(BytesToGB(container.memory));
    			seriesCpu.push({
    				name: container.container_name,
    				barMaxWidth: '30%',
    	            type: 'bar',
    	            stack: '总量',
    	            data: cpuData
    			});
    			seriesMem.push({
    				name: container.container_name,
    				barMaxWidth: '30%',
    	            type: 'bar',
    	            stack: '总量',
    	            data: memData
    			});
        	});
    		
    		legendData.push(unit.name + '未分配');
    		
    		cpuData = [],
			memData = [];
			for(i=0; i<xAxisData.length; i++){
    			cpuData.push(0);
    			memData.push(0);
    		}
			cpuData.push(unit.cpu_free);
			memData.push(BytesToGB(unit.memory_free));
			seriesCpu.push({
				name: unit.name + '未分配',
				barMaxWidth: '30%',
	            type: 'bar',
	            stack: '总量',
	            data: cpuData
			});
			seriesMem.push({
				name: unit.name + '未分配',
				barMaxWidth: '30%',
	            type: 'bar',
	            stack: '总量',
	            data: memData
			});
			
    		
    		xAxisData.push(unit.name);
    	});
    	
    	var cpuOption = {},
    		memOption = {};
    	$.extend(true, cpuOption, option);
    	$.extend(true, memOption, option);
    	
    	cpuOption.legend.data = legendData;
    	memOption.legend.data = legendData;
    	cpuOption.xAxis = [
	        {
	            type : 'category',
	            data : xAxisData
	        }
	    ];
    	memOption.xAxis = [
	        {
	            type : 'category',
	            data : xAxisData
	        }
	    ];
    	cpuOption.series = seriesCpu;
    	memOption.series = seriesMem;
    	cpuOption.tooltip.formatter = cpuTooltipFun;
    	memOption.tooltip.formatter = memTooltipFun;
    	
    	
    	unitCpuChart.setOption(cpuOption);
    	unitMemChart.setOption(memOption);
    	
    	unitCpuChart.hideLoading();
    	unitMemChart.hideLoading();
    }
    
    function cpuTooltipFun(params, ticket, callback) {
    	var html = params[0].name + "</br>";
    	$.each(params, function(index, param){
    		if(param.data > 0){
    			html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+param.color+';"></span>'+param.seriesName+': '+param.data+'<br />';
    		}
    	});
    	return html;
    }
    function memTooltipFun(params, ticket, callback) {
    	var html = params[0].name + "</br>";
    	$.each(params, function(index, param){
    		if(param.data > 0){
    			html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+param.color+';"></span>'+param.seriesName+': '+param.data+'G<br />';
    		}
    	});
    	return html;
    }
</script>